<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TOTP验证码修复测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .test-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .test-section {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #e8e8e8;
            border-radius: 6px;
        }
        .test-title {
            color: #1890ff;
            margin-bottom: 10px;
            font-weight: bold;
        }
        .test-item {
            margin: 10px 0;
            padding: 8px;
            background: #f9f9f9;
            border-radius: 4px;
        }
        .status {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }
        .status.success {
            background: #f6ffed;
            color: #52c41a;
            border: 1px solid #b7eb8f;
        }
        .status.fixed {
            background: #e6f7ff;
            color: #1890ff;
            border: 1px solid #91d5ff;
        }
        .status.warning {
            background: #fff7e6;
            color: #fa8c16;
            border: 1px solid #ffd591;
        }
        .code-block {
            background: #f5f5f5;
            padding: 10px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            margin: 10px 0;
            border-left: 4px solid #1890ff;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>🔧 TOTP验证码修复测试</h1>
        
        <div class="test-section">
            <div class="test-title">🐛 发现的问题</div>
            <div class="test-item">
                <span class="status warning">⚠️ 问题</span>
                <strong>倒计时不动</strong> - 倒计时定时器只运行30秒就停止了
            </div>
            <div class="test-item">
                <span class="status warning">⚠️ 问题</span>
                <strong>验证码更新时机错误</strong> - 验证码在倒计时20秒时更新，应该在倒计时到0秒时更新
            </div>
            <div class="test-item">
                <span class="status warning">⚠️ 问题</span>
                <strong>定时器不同步</strong> - 倒计时和验证码更新没有同步
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">🔧 修复方案</div>
            <div class="test-item">
                <span class="status fixed">✅ 修复</span>
                <strong>统一定时器</strong> - 使用单一定时器同时处理倒计时和验证码更新
            </div>
            <div class="test-item">
                <span class="status fixed">✅ 修复</span>
                <strong>持续倒计时</strong> - 倒计时定时器持续运行，不再30秒后停止
            </div>
            <div class="test-item">
                <span class="status fixed">✅ 修复</span>
                <strong>精确更新时机</strong> - 验证码在倒计时到0秒时更新，而不是20秒时
            </div>
            <div class="test-item">
                <span class="status fixed">✅ 修复</span>
                <strong>调试日志</strong> - 添加详细的控制台日志便于调试
            </div>
            <div class="test-item">
                <span class="status fixed">✅ 修复</span>
                <strong>手动刷新</strong> - 添加手动刷新验证码按钮
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">📝 修复后的代码结构</div>
            <div class="code-block">
// TOTP相关变量
const currentTOTPCode = ref('');
const countdown = ref(30);
const totpInterval = ref&lt;number | null&gt;(null);
const countdownInterval = ref&lt;number | null&gt;(null);

// 启动TOTP定时器
const startTOTPTimer = () => {
  // 清除现有定时器
  stopTOTPTimer();
  
  // 立即更新一次验证码
  updateTOTP();
  
  // 设置统一的定时器（每秒检查）
  countdownInterval.value = setInterval(() => {
    const now = Date.now();
    const remaining = 30 - (Math.floor(now / 1000) % 30);
    countdown.value = remaining;
    
    // 当倒计时到0秒时更新验证码
    if (remaining === 30) {
      console.log('倒计时归零，更新验证码');
      updateTOTP();
    }
  }, 1000);
};

// 停止TOTP定时器
const stopTOTPTimer = () => {
  if (totpInterval.value) {
    clearInterval(totpInterval.value);
    totpInterval.value = null;
  }
  if (countdownInterval.value) {
    clearInterval(countdownInterval.value);
    countdownInterval.value = null;
  }
};
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">🧪 测试步骤</div>
            <div class="test-item">
                1. 打开浏览器访问 <code>http://localhost:5174/login</code>
            </div>
            <div class="test-item">
                2. 打开浏览器开发者工具的控制台（F12）
            </div>
            <div class="test-item">
                3. 观察控制台日志输出：
                <ul>
                    <li>组件挂载时：<code>组件挂载，启动TOTP定时器</code></li>
                    <li>定时器启动：<code>TOTP定时器启动完成</code></li>
                    <li>验证码更新：<code>[时间] TOTP验证码更新: 123456</code></li>
                    <li>倒计时更新：<code>[时间] TOTP倒计时: 25s</code></li>
                </ul>
            </div>
            <div class="test-item">
                4. 验证功能：
                <ul>
                    <li>倒计时每秒更新（30→29→28...→1→30）</li>
                    <li>验证码每30秒更新一次</li>
                    <li>倒计时和验证码更新同步</li>
                    <li>点击"手动刷新"按钮可以立即更新验证码</li>
                </ul>
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">🎯 预期结果</div>
            <div class="test-item">
                <span class="status success">✅ 正常</span>
                <strong>倒计时持续运行</strong> - 倒计时从30秒开始，每秒递减，到1秒后重新回到30秒
            </div>
            <div class="test-item">
                <span class="status success">✅ 正常</span>
                <strong>验证码精确更新</strong> - 验证码在倒计时到0秒时更新，然后重新开始30秒倒计时
            </div>
            <div class="test-item">
                <span class="status success">✅ 正常</span>
                <strong>同步更新</strong> - 倒计时归零时验证码同时更新
            </div>
            <div class="test-item">
                <span class="status success">✅ 正常</span>
                <strong>手动刷新</strong> - 点击"手动刷新"按钮可以立即更新验证码
            </div>
            <div class="test-item">
                <span class="status success">✅ 正常</span>
                <strong>调试信息</strong> - 控制台显示详细的定时器运行日志
            </div>
        </div>

        <div class="test-section">
            <div class="test-title">⚠️ 注意事项</div>
            <div class="test-item">
                • 确保浏览器控制台已打开，观察日志输出
            </div>
            <div class="test-item">
                • 如果问题仍然存在，请检查浏览器是否支持setInterval
            </div>
            <div class="test-item">
                • 验证码更新可能与系统时间有关，确保系统时间准确
            </div>
            <div class="test-item">
                • 如果倒计时仍然不动，可能是页面被挂起或浏览器性能问题
            </div>
        </div>
    </div>
</body>
</html>
